---
id: boolean_switch
title: BooleanSwitch
sidebar_label: BooleanSwitch
---

BooleanSwitch is a component for toggling between `true`, `false`, or an indeterminate state. It offers a binary choice or an optional third state, often signifying a lack of preference.

## Usage

Import the `BooleanSwitch` from `@firecms/ui` and provide the `value`, and optionally, a callback with `onValueChange` to handle the state changes.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Default Switch

Example of a simple switch that toggles between `true` and `false`.

import BooleanSwitchDefaultDemo from '../../samples/components/boolean_switch/boolean_switch_default';
import BooleanSwitchDefaultSource from '!!raw-loader!../../samples/components/boolean_switch/boolean_switch_default';

<CodeSample>
    <BooleanSwitchDefaultDemo/>
</CodeSample>

<CodeBlock language="tsx">{BooleanSwitchDefaultSource}</CodeBlock>

## Indeterminate State

Example of a switch that toggles between `true`, `false`, and `null` (indeterminate).

import BooleanSwitchIndeterminateDemo from '../../samples/components/boolean_switch/boolean_switch_indeterminate';
import BooleanSwitchIndeterminateSource from '!!raw-loader!../../samples/components/boolean_switch/boolean_switch_indeterminate';

<CodeSample>
    <BooleanSwitchIndeterminateDemo/>
</CodeSample>

<CodeBlock language="tsx">{BooleanSwitchIndeterminateSource}</CodeBlock>

## Size Variants

The `BooleanSwitch` component can have different sizes, controlled by the `size` prop.

import BooleanSwitchSizeDemo from '../../samples/components/boolean_switch/boolean_switch_size';
import BooleanSwitchSizeSource from '!!raw-loader!../../samples/components/boolean_switch/boolean_switch_size';

<CodeSample>
    <BooleanSwitchSizeDemo/>
</CodeSample>

<CodeBlock language="tsx">{BooleanSwitchSizeSource}</CodeBlock>

## Disabled State

Disabled `BooleanSwitch` does not allow user interaction and appears visually distinct.

import BooleanSwitchDisabledDemo from '../../samples/components/boolean_switch/boolean_switch_disabled';
import BooleanSwitchDisabledSource from '!!raw-loader!../../samples/components/boolean_switch/boolean_switch_disabled';

<CodeSample>
    <BooleanSwitchDisabledDemo/>
</CodeSample>

<CodeBlock language="tsx">{BooleanSwitchDisabledSource}</CodeBlock>
